<div>
  <div class="d-flex justify-content-between align-items-start">
    <div class="d-flex flex-column justify-content-start align-items-start">
      <h3>Select file</h3>
      <div
        ng2FileDrop
        [ngClass]="{ 'nv-file-over': hasBaseDropZoneOver }"
        (fileOver)="fileOverBase($event)"
        [uploader]="uploader"
        class="well my-drop-zone">
        Base drop zone
      </div>
      <input
        class="file-selection"
        type="file"
        ng2FileSelect
        [uploader]="uploader" />
    </div>

    <div class="d-flex flex-column justify-content-end align-items-center">
      <table class="table file-table">
        <thead>
          <tr>
            <th style="width:50%">Name</th>
            <th>Size</th>
            <th>Progress</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of uploader.queue">
            <td>
              <strong>{{ item?.file?.name | shortenFromMiddle: 30 }}</strong>
            </td>
            <td *ngIf="uploader.options.isHTML5" nowrap>
              {{ item?.file?.size / 1024 / 1024 | number: '.2' }} MB
            </td>
            <td *ngIf="uploader.options.isHTML5">
              <div class="progress" style="margin-bottom: 0">
                <div
                  class="progress-bar"
                  role="progressbar"
                  [ngStyle]="{ width: percentage + '%' }"></div>
              </div>
            </td>
            <td class="text-center">
              <span *ngIf="item.isSuccess"
                ><i class="glyphicon glyphicon-ok"></i
              ></span>
              <span *ngIf="item.isCancel"
                ><i class="glyphicon glyphicon-ban-circle"></i
              ></span>
              <span *ngIf="item.isError"
                ><i class="glyphicon glyphicon-remove"></i
              ></span>
            </td>
            <td nowrap>
              <button
                type="button"
                class="btn btn-upload btn-xs"
                (click)="item.upload()"
                [disabled]="item.isReady || item.isUploading || item.isSuccess">
                <em class="eos-icons icon-18">flask</em>
              </button>
              <button
                type="button"
                class="btn btn-remove-file btn-xs"
                (click)="item.remove()">
                <em class="eos-icons icon-18">delete</em>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
